<template>
	<div id="audition_add" class="dialog animated"  :class="open? 'fadeIn':'fadeOut'"
		 v-show="show" :style="{visibility:(visible?'visible':'hidden')}">
		 
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				新建试听
				<div class="close" @click="cancel()"></div>
			</div>
			<div class="form">
				<div class="row_0">
					<label class="label" style="width: 1rem;">班级封面图</label>
					<div class="cover_img" :style="{backgroundImage : 'url('+(param.photo||defaultImg)+')'}"></div>
					<div class="upload_btn" @click="selectFile()">上传图片</div>
					<input type="file" id="file" hidden accept="image/jpeg,image/jpg,image/png" />
				</div>
				<div class="row_1">
					<label class="must">*</label>
					<label class="label">班级名称</label>
					<el-input v-model="param.className" id="className" style="width: 2.6rem;" clearable maxLength="100"></el-input>
				</div>
				<div class="row_1">
					<label class="must">*</label>
					<label class="label">开课时间</label>
				   	<el-date-picker v-model="classDate" :picker-options="pickerOptions"
					    style="width: 2.6rem;" type="daterange"
					    align="center"  unlink-panels range-separator="至"
					    start-placeholder="开始日期" end-placeholder="结束日期"
					    value-format= "yyyy-MM-dd">
					</el-date-picker>
					&emsp;
				</div>
				
				<div class="row_1">
					<label class="must">*</label>
					<label class="label">课程名称</label>
					<el-select v-model="param.coursePackageId" id="coursePackageId" filterable
							   @change="courseChange" placeholder="请选择试听课程" style="width: 2rem;">
					    <el-option
					      v-for="item in courseList"
					      :key="item.courseId"
					      :label="item.courseName"
					      :value="item.maxHourCoursePackage.coursePackageId">
					    </el-option>
					</el-select>
					<el-select v-model="param.libraryCourseSyllabusId" id="syllabusId"
						style="width: 1.9rem;" placeholder="请选择试听课节">
					    <el-option v-for="item in selectCourse.libraryCourseSyllabusList" :key="item.syllabusId"
					    	:label="item.syllabusName" :value="item.syllabusId">
					    </el-option>
					</el-select>
					
					&emsp;
					<label class="must"></label>
					<label class="label">课程类型</label>
					<el-input :value="courseTypeMap[selectCourse.courseType]" class="input" disabled></el-input>
					
					&emsp;&emsp;
					<label class="label_3">科目</label>
					<el-input :value="selectCourse.subjectName" class="input" disabled></el-input>
				</div>
				
				<div class="row_1" >
					<label class="must"></label>
					<label class="label">每次上课</label>
					<el-input v-model="param.oneCourseHour" style="width:0.8rem" disabled></el-input>
					&nbsp;节
					&emsp;&emsp;&emsp;
					<label class="must">*</label>
					<label class="label" style="width: 0.62rem;">每节课</label>
					<el-input v-model="param.oneCourseHourMinute" id="oneCourseHourMinute" maxLength="3" style="width:0.8rem"></el-input>
					&nbsp;分钟
					
					<template v-if="selectCourse.courseType==4">
						&emsp;&emsp;
						<label class="must">*</label>
						<label class="label">外教类型</label>
						<el-select v-model="param.foreignTeacherType" id="foreignType" class="input" placeholder="">
						    <el-option v-for="item in foreignType" :key="item.value"
						    	:label="item.name" :value="item.value">
						    </el-option>
						</el-select>
					</template>
				</div>
				
				<div class="row_1">
					<label class="must">*</label>
					<label class="label_2" style="letter-spacing: 0;">计划招生人数</label>
					<el-input v-model="param.recruitNum" id="recruitNum" maxLength="3" style="width: 1.57rem;"></el-input>
					&emsp;
					
					<label class="must"></label>
					<label class="label_3">教师</label>
					<el-select v-model="param.teacherUserId" class="input" placeholder="" filterable>
					    <el-option v-for="item in userList" :key="item.userId"
					    	:label="item.nickName" :value="item.userId">
					    </el-option>
					</el-select>
					&emsp;&emsp;
					<label class="label_3">助教</label>
					<el-select v-model="param.assisUserId" class="input" placeholder="" filterable>
					    <el-option v-for="item in userList" :key="item.userId"
					    	:label="item.nickName" :value="item.userId">
					    </el-option>
					</el-select>
					&emsp;&emsp;
					<label class="label_3">教室</label>
					<el-select v-model="param.classRoomId" class="input" placeholder="" filterable>
					    <el-option v-for="item in classroomList" :key="item.classroomId"
					    	:label="item.name" :value="item.classroomId">
					    </el-option>
					</el-select>
				</div>
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="cancel()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict,$file;
var param = {
	className : "",
	photo : "",
	coursePackageId : "",
	oneCourseHour : 1,
	oneCourseHourMinute : "",
	recruitNum : "",
	campusId : "",
	teacherUserId : "",
	assisUserId : "",
	classRoomId : "",
	libraryCourseSyllabusId : "", //库课节id
	foreignTeacherType : "",
	_wait : ""
}

export default {
	data : function() {
		return {
			show : false,
			open : false,
			visible : false,
			param : tool.clone(param),
			campusId : null,
			//开课周期
			classDate : null,
			//根据校区更新
			courseList : null,
			userList : null,
			classroomList : null,
			//选中的课程
			selectCourse : {},
			//数据字典
			courseTypeMap : null,
			foreignType : null,
			//每周上课数,开课周期
			courseDate : null,
			defaultImg : require("../../../assets/img/clue_manage/default_class.png"),
			//日期有效性计算
	        pickerOptions : {
				disabledDate : function(date) {
					date = tool.DateToString(date,"yyyy-MM-dd");
					var today = tool.DateToString(new Date(),"yyyy-MM-dd");
					return date < today;
				}
			}
		}
	},
	watch : {
		"param.recruitNum" : function(val) {
			this.param.recruitNum = tool.parseInt(val);
		},
		"param.oneCourseHourMinute" : function(val) {
			this.param.oneCourseHourMinute = tool.parseInt(val);
		}
	},
	methods : {
		init : function() {
			vm.show = true;
			setTimeout(function() { 
				vm.open = true; 
				vm.visible = true;
			},1);
			
			//当前校区id
			var campusId = vm.$store.state.campusId;
			//初始化参数
			vm.param = tool.clone(param);
			vm.param.campusId = campusId;
			vm.classDate = null;
			
			//选中的课程
			vm.selectCourse = {};
			
			//当前校区id和上次校区id不一致才重新加载课程列表,减少请求次数
			if(vm.campusId != campusId) {
				vm.loadList();
				vm.campusId = campusId;
			}
			
		},
		cancel : function() {
			//隐藏弹窗
			vm.open = false;
			setTimeout(function() {
				vm.show = false;
				vm.visible = false;
			},500);
		},
		selectFile : function() {
			$file.click();
		},
		sure : function() {
			
			var p = tool.clone(vm.param);
			
			var minute = vm.param.oneCourseHourMinute;
			//定义检测规则
			var rules = [{
				judge : p.className,
				focus : $("#audition_add #className"),
				tips : tips.blank
			},{
				judge : vm.classDate,
				focus : $("#audition_add .el-range-input").eq(0),
				tips : tips.blank
			},{
				judge : p.coursePackageId,
				focus : $("#audition_add #coursePackageId"),
				tips : tips.blank
			},{
				judge : p.libraryCourseSyllabusId,
				focus : $("#audition_add #syllabusId"),
				tips : tips.blank
			},{
				judge : p.oneCourseHourMinute>0 && p.oneCourseHourMinute<=480,
				focus : $("#audition_add #oneCourseHourMinute"),
				tips : "每节课请设1~480分钟"
			},{
				judge : vm.selectCourse.courseType!=4 || p.foreignTeacherType, //双师课,加上外教类型
				focus : $("#audition_add #foreignType"),
				tips : tips.blank
			},{
				judge : p.recruitNum,
				focus : $("#audition_add #recruitNum"),
				tips : tips.blank
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			
			//班级开始结束时间
			p.startTime = vm.classDate[0];
			p.endTime = vm.classDate[1];
			
			api.auditionAdd(p).then(function(data) {
				if(data.resultCode == 4038) {
					tool.message({showClose: true, message: "课程包数据有误", type: 'warning'});
					return;
				}
				tool.message({showClose: true, message: "试听班级新建成功", type: 'success'});
				vm.$emit('callback');
				vm.cancel();
			});
		},
		courseChange : function(packId) { //课程变化
			//重置课节
			vm.param.libraryCourseSyllabusId = "";
			//遍历课程列表,找到对应的课程对象
			vm.courseList.forEach(function(item) {
				if(packId == item.maxHourCoursePackage.coursePackageId) {
					vm.selectCourse = item;
					return false;
				}
			});
			
			//如果有课节列表
			var list = vm.selectCourse.libraryCourseSyllabusList;
			if(list && list.length>0) {
				//将课节时长赋给每课节多少分钟
				vm.param.oneCourseHourMinute = list[0].oneSyllabusDuration;
			}
		},
		loadList : function() {
			var campusId = vm.$store.state.campusId;
			//课程列表,获取普通班课,双师,在线3种类型
			api.courseList({campusId : campusId, courseType : "3,4,5"}).then(function(data) {
				data.list.forEach(function(item){
					//不是双师课不处理
					if(item.courseType!=4) {
						return;
					}
					var sList = item.libraryCourseSyllabusList;
					for(let i=0; i<sList.length; i++) {
						//没带有飞博的id不可以预约,切掉
						if(sList[i].feiboLessonId == null) {
							sList.splice(i,1);
							i--;
						}
					}
				})
				
				vm.courseList = data.list;
				
			});
			//用户列表
			api.userListByCampus({campusId : campusId}).then(function(data) {
				vm.userList = data.userList;
			});
			//教室列表
			api.getClassroomList({campusId : campusId}).then(function(data) {
				vm.classroomList = data.info;
			});
		}
	},
	mounted : function() {
		$file = $("#audition_add #file");
		
		$file.change(function(){
			let f = $file[0].files[0];
			//没有文件,直接结束
			if(!f) {
				return;
			}
			var param = new FormData();
			param.append("file",$file[0].files[0]);
			
			api.uploadFile(param).then(function(data){
				vm.param.photo = data.url;
			})
		})
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict, true);
		//数据字典
		vm.courseTypeMap = tool.parseDict(dict["course_type"]);
		vm.foreignType =  dict["foreign_teacher_type"];
		
//		vm.init();
	}
}
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/audition_add.css"></style>
<style scoped>
	.panel {
		width: 11.4rem;
	}
</style>
